<template>
	<view class="wrap">
		<cu-custom bgColor="bg-gradual-them" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{pageName}}</block>
		</cu-custom>

		<u-notice-bar mode="horizontal" type="primary" :list="listBar"></u-notice-bar>




		<view class="center-box shadow">
			<u-form ref="uForm">


				<!-- 图片上传 -->

				<u-form-item label="我的头像" left-icon="photo" borderBottom label-width="200">
				</u-form-item>

				<view class="myflex">

					<view style="padding: 30rpx;">
						<image :src="userinfo.avatarUrl" mode="aspectFill" style="border-radius: 50%; 
					width: 100rpx; height: 100rpx;">
						</image>
					</view>

					<view class="action" style="padding-right: 40rpx;">
						<button class='cu-btn bg-them shadow' open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							更新头像</button>
					</view>

				</view>

				<!-- 说点什么 -->
				<u-form-item label="我的昵称" left-icon="tags" borderBottom label-width="350">
				</u-form-item>

				<view class="myflex" style="padding-left: 20rpx; height: 130rpx;">

					<view>
						<input type="nickname" class="weui-input myinput" maxlength="8" style="width: 200rpx;"
							v-model="user.nickname" placeholder="请输入新昵称">
						</input>
					</view>

					<view class="action" style="padding-right: 40rpx;">
						<button class='cu-btn bg-them shadow' @click="getName()">
							使用原名</button>
					</view>

				</view>


			</u-form>
		</view>


		<!-- <button @click="open">打开弹窗</button> -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="base" message="提示" :duration="2000" :before-close="true" @close="close"
				@confirm="confirm">
				<view>
					<text class="cuIcon-warn text-blue u-font-lg">{{' '}} 请确认提交</text>
				</view>
			</uni-popup-dialog>
		</uni-popup>

		<!-- 打开弹窗 -->
		<view style="width: 85%;margin: 50rpx auto;">
			<u-button @click="open" :ripple='true'>更新信息</u-button>
		</view>




		<!-- 提示框 -->
		<u-toast ref="uToast" />



	</view>
</template>

<script>
	import imgData from "@/common/uiImg.js";
	import {
		setUserInfo,
		getUserInfo,
		setToken,
		getToken,
		removeUserInfo,
		removeToken
	} from '@/utils/auth';
	export default {
		data() {
			return {
				pageName: '资料更新',
				listBar: ['猫猫小程序交流群：133808502'],

				action: this.uploadimg(), // 图片上传地址

				// 原来的数据
				userinfo: {
					avatarUrl: "",
					nickName: "",
				},

				// 新的数据
				user: {
					openid: "",
					avatar: "",
					nickname: "",
				},

				header: {
					header: "header"
				},

				avatarUrlFlag: 0, // 判断用户是否更新头像

			}
		},
		onLoad(option) {
			this.user.openid = option.openid
			this.userinfo = getUserInfo();
			console.log(this.userinfo)
			// 获取用户信息


		},

		methods: {

			// 获取 头像
			onChooseAvatar(e) {
				console.log(e.detail.avatarUrl);
				this.userinfo.avatarUrl = e.detail.avatarUrl;
				this.avatarUrlFlag = 1 // 代表更新了头像
				console.log(this.avatarUrlFlag);
			},


			// 获取昵称
			getName() {
				this.user.nickname = this.userinfo.nickName;
			},

			// 更新数据
			//提示
			showToast(e) {

				//警告提示 【选项检查】
				if (e[0] != 'confirm') {
					this.$refs.uToast.show({
						title: e[0],
						type: 'error',
						url: e[1]
					})
					return
				}


				try {
					//如果失败
					if (this.user.avatar == null || this.user.avatar == undefined || this.user.avatar == "") {
						//提示发送错误，请稍后重试
						this.$refs.uToast.show({
							title: '更新失败',
							type: 'error',
							url: ''
						})
						return
					}

					console.log("user:", this.user)

					// 发送请求
					// this.request('wxUserUpdate', this.user, 'POST').then(res => {

					this.$u.api.wxUserUpdate(this.user).then(res => {

						console.log("res:", res)

						if (res.code == 200) {
							removeToken()
							removeUserInfo()

							//提示成功
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success',
								url: '/pages/index/tabbar'
							})
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error',
								url: '/pages/index/tabbar'
							})
						}
					})


				} catch (e) {
					//TODO handle the exception
					this.$refs.uToast.show({
						title: '更新失败 请稍后再试',
						type: 'error',
						url: ''
					})
				}

			},

			//打开弹窗
			open() {
				let e = []
				e[0] = ''
				e[1] = ''

				// 昵称 检查
				if (this.user.nickname == '' || this.user.nickname == NaN || this.user.nickname == null) {
					e[0] = '昵称不能为空哟！'
					this.showToast(e)
					return
				}

				this.$refs.popup.open();

			},
			/**
			 * 点击取消按钮触发
			 */
			close() {
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 */
			confirm() {
				// TODO 

				// 更改了头像，才上传头像
				if (this.avatarUrlFlag === 1) {

					//确认无误后，上传头像图片
					uni.uploadFile({
						header: this.header,
						url: this.action, //请求地址
						filePath: this.userinfo.avatarUrl,
						name: 'file',
						formData: {
							'user': 'test'
						},
						success: (uploadFileRes) => {
							let result = JSON.parse(uploadFileRes.data) // 返回来的数据被转为了string类型，需要转换为json数据
							// console.log(uploadFileRes.data)
							// console.log(result)
							console.log(result.fileName)

							this.user.avatar = result.fileName // 头像路径
						}
					})
				} else {
					this.user.avatar = this.userinfo.avatarUrl // 将原来赋值过来
				}


				// 关闭弹窗
				this.$refs.popup.close()


				//开启加载画面
				uni.showLoading({
					title: '更新中'
				});

				//设置定时器 【2秒后再执行后面的，确保后端传回了 url】
				this.timer = setTimeout(() => {
					let e = ['confirm'] // 说明已经确定

					//关闭加载画面
					uni.hideLoading();

					//开启弹窗
					this.showToast(e);

				}, 2000);
			},


		}


	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background: linear-gradient(-120deg, #ebfbff, #ebfbff);

	}
</style>

<style lang="scss" scoped>
	.cat-head {
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
	}
	
	

	.center-box {
		color: #333333;
		width: 85%;
		background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 20rpx;
		padding: 0rpx 30rpx 0rpx;
		position: relative;
		margin-top: 50rpx;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
	}


	.bxBox {
		position: relative;
		display: flex;
		/* padding: 0 30rpx; */
		min-height: 100rpx;
		/* background-color: #ffffff; */
		/* justify-content: space-between; */
		align-items: center;
		font-size: 30rpx;
		line-height: 1.6em;
		flex: 1;

		.bxImg {
			display: inline-block;
			margin-right: 10rpx;
			width: 1.6em;
			text-align: center;
		}
	}

	.my-text {
		font-size: 20rpx;
	}

	.my-name {
		font-size: 30rpx;
	}

	.myflex {
		position: relative;
		display: flex;
		// padding: 0 30upx;
		// min-height: 100upx;
		background-color: #ffffff;
		justify-content: space-between;
		align-items: center;
	}

	.myinput {
		margin: 20rpx;
		// border: 2rpx solid #f2f2f2;
	}
</style>
